<template>
    <!-- 搜索 -->
    <z-paging :empty-view-error-text="`对不起,页面走丢了\n请刷新试试`" :empty-view-text="`暂无数据`"
        :show-empty-view-reload-when-error="false" ref="paging" v-model="list" @query="queryList" :fixed="true"
        width="100%" height="100%">

        <template #top>
            <view class="px-[32rpx]">
                <view class=" pt-[20rpx]  flex align-center justify-between ">
                    <view style="border: #000000 solid 2rpx;" class="w-[686rpx] h-[76rpx] bg-[#FFFFFF] flex justify-between rounded-[8rpx]">
                        <view class="flex items-center  pl-[24rpx]">
                            <picker mode="region" :value="selectedRegion" @change="onRegionChange">
                                <view class="flex items-center">
                                    <view class="font-[500] text-[28rpx] font-[#000000] leading-[40rpx] text-left ">{{ selectedCity }}</view>
                                    <image src="@/static/images/img/xb_1.png" class="w-[40rpx] h-[40rpx] mr-[8rpx]"></image>
                                </view>
                            </picker>
                            <view class="">
                                <input class="w-[400rpx] h-[40rpx] " v-model="keyWord" type="text" placeholder="请输入车型、品牌"
                                    placeholder-style="color:#999999;font-size:24rpx;font-weight:400;font-family:PingFangSC;" />
                            </view>
                        </view>

                        <view class="w-[132rpx] h-[60rpx] pt-[8rpx] mr-[8rpx]">
                            <up-button text="搜索" @click="search" :customStyle="{
                                width: '132rpx',
                                height: '60rpx',
                                color: '#000000',
                                borderRadius: '10rpx',
                                fontSize: '28rpx',
                                fontWeight: '500',
                                fontFamily: 'PingFangSC',
                                background: 'linear-gradient( 98deg, #FFF8DD 0%, #FFD856 100%)'
                            }"></up-button>
                        </view>
                    </view>
                </view>
            </view>
        </template>
        
        <view class="px-[32rpx] mt-[40rpx]">
            <view class="car-list">
                <view v-for="(car, index) in list" :key="index" class="car-item mb-[24rpx]">
                    <view class="flex">
                        <image :src="car.vehiclePictures || '/static/images/game_logo/patw.png'"
                            class="w-[200rpx] h-[150rpx] rounded-[8rpx]" mode="aspectFill"></image>
                        <view class="ml-[16rpx] flex-1">
                            <view class="text-[28rpx] font-bold leading-[40rpx]">{{ car.brandModel || '大众一2022款 帕萨特2.0TSI330TSI星空精英版'}}</view>
                            <view class="flex items-center text-[24rpx] text-[#999] mt-[8rpx]">
                                <text>{{ car.registrationTime ? car.registrationTime.substring(0, 4) : '2022' }}</text>
                                <text class="mx-[8rpx]">/</text>
                                <text>{{ car.mileage || '7.9万公里' }}</text>
                            </view>
                            <view class="flex justify-between  mt-[8rpx]">
                                <view class="text-[24rpx] text-[#999]">{{ car.createTime || '2025-04-12 12:23:12' }}</view>
                                <view class="flex flex-col items-center mt-[-40rpx]">
                                    <text class="text-[28rpx] text-[#FF0000] font-bold">{{ car.newPrice || car.guidingPrice }}万</text>
                                    <text class="text-[24rpx] text-[#999] ml-[12rpx]">{{ car.location || '武汉' }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getSearch } from '@/api/sy'

const menuButtonInfoBottom = ref(90) // 胶囊按钮信息
const keyWord = ref('') // 搜索关键词
const selectedRegion = ref([0, 0, 0]) // 选中的省市区索引
const selectedCity = ref('全国') // 当前显示的城市名称

// 搜索方法
const search = () => {
    paging.value.reload()
}

// 地区选择回调
const onRegionChange = (e) => {
    const { value } = e.detail
    selectedRegion.value = value
    
    if (value && value.length >= 2) {
        selectedCity.value = value[1]
    } else if (value && value.length >= 1) {
        selectedCity.value = value[0]
    } else {
        selectedCity.value = '全国'
    }
    
    console.log('选择的地区:', value)
    console.log('显示的城市:', selectedCity.value)
    
    // 地区改变时重新搜索
    paging.value.reload()
}

onLoad(() => {
    menuButtonInfoBottom.value = uni.getMenuButtonBoundingClientRect().bottom || 90
    console.log('结果是', uni.getMenuButtonBoundingClientRect())
    console.log('结果qqqqqqq是', menuButtonInfoBottom.value)
})

// 分页数据
const list = ref([])
const paging = ref(null)

const queryList = async (pageNum, pageSize) => {
    try {
        const from = {
            pageNum: pageNum,
            pageSize: pageSize,
            brandModel: keyWord.value, // 搜索关键词
            location: selectedCity.value !== '全国' ? selectedCity.value : undefined // 地区筛选
        }
        
        console.log('搜索参数:', from)
        
        const res = await getSearch(from)
        
        if (res.code == 200) {
            // 处理返回的数据
            if (res.rows && Array.isArray(res.rows)) {
                paging.value.complete(res.rows)
            } else {
                // 处理其他数据格式
                try {
                    if (typeof res.msg == 'object') {
                        if (res.msg.result) {
                            paging.value.complete(res.msg.result)
                        } else if (res.msg.rows) {
                            paging.value.complete(res.msg.rows)
                        } else {
                            paging.value.complete([])
                        }
                    } else {
                        const parsedData = JSON.parse(res.msg)
                        if (parsedData && parsedData.result) {
                            paging.value.complete(parsedData.result)
                        } else if (parsedData && parsedData.rows) {
                            paging.value.complete(parsedData.rows)
                        } else {
                            paging.value.complete([])
                        }
                    }
                } catch (parseError) {
                    console.error('解析搜索数据出错:', parseError)
                    paging.value.complete([])
                }
            }
        } else {
            console.error('搜索失败:', res.msg)
            paging.value.complete([])
        }
    } catch (e) {
        console.log('搜索报错=>', e)
        paging.value.complete(false)
    }
}
</script>

<style scoped lang="scss">
.car-item {
    background-color: #FFFFFF;
    border-radius: 12rpx;
    padding: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
</style>